<div class="row publish-signup">
    <div class="span5">
        <div style="margin-bottom: 20px">
            {#if guest_text_above} {#each guest_text_above as text} {@html text} {/each} {:else}
            <h2>{@html __('publish / guest / h1')}</h2>

            <p>{@html __('publish / guest / p')}</p>
            {/if}
        </div>

        <FormBlock
            label="{ __('publish / guest / e-mail') }"
            help="{ __('publish / guest / example-email') }"
        >
            <div style="display: flex">
                <input type="email" class="input-xlarge" bind:value="email" />

                <button
                    on:click="createAccount(email)"
                    class="btn btn-save btn-primary"
                    style="white-space: nowrap; margin-left: 10px"
                >
                    <i class="fa {signedUp ? 'fa-circle-o-notch fa-spin': 'fa-envelope'}"></i>
                    &nbsp; {@html __('publish / guest / cta')}
                </button>
            </div>
        </FormBlock>

        {#if guest_text_below} {#each guest_text_below as text} {@html text} {/each} {/if}

        <div style="margin-top: 30px">
            <button class="btn btn-save btn-default btn-back">
                <i class="fa fa-chevron-left"></i> &nbsp; {@html __('publish / guest / back')}
            </button>

            {#if error}
            <div class="alert alert-warning">{error}</div>
            {/if}
        </div>
    </div>
</div>

<style>
    :global(.publish-signup h2) {
        font-size: 18px !important;
        font-weight: 400 !important;
        font-family: 'Roboto', Helvetica, sans-serif !important;
        line-height: 1.5 !important;
    }
</style>

<script>
    import { __ } from '@datawrapper/shared/l10n';
    import { post } from '@datawrapper/shared/httpReq';
    import FormBlock from '@datawrapper/controls/FormBlock.html';
    import { trackEvent } from '@datawrapper/shared/analytics';

    export default {
        components: { FormBlock },
        data() {
            return {
                error: '',
                email: '',
                guest_text_above: [],
                guest_text_below: [],
                signedUp: false
            };
        },
        helpers: { __ },
        methods: {
            async createAccount(email) {
                this.set({ signedUp: true });
                trackEvent('Chart Editor', 'send-embed-code');
                try {
                    let chartId = null;

                    if (typeof window.chart !== 'undefined') {
                        chartId = window.chart.get().id;
                    } else {
                        chartId = this.store.get().id;
                    }

                    const res = await post('/v3/auth/signup', {
                        payload: {
                            email,
                            invitation: true,
                            chartId
                        }
                    });

                    if (this.get().fromSvelte) {
                        // when in new chart editor, set user object
                        this.set({ signedUp: false, error: '' });
                        this.store.set({ user: res });
                    } else {
                        // otherwise, reload
                        window.location.reload();
                    }
                } catch (e) {
                    if (e.name === 'HttpReqError') {
                        const res = await e.response.json();
                        this.set({ error: res.message || e });
                    } else {
                        this.set({ error: `Unknown error: ${e}` });
                    }
                }
            }
        }
    };
</script>
